<template>
  <div class="mx-container">
    <zz-sub-nav :list="list" :index.sync="index">
      <div class="sub-nav-content">
        <div>
          <div class="details-title">{{$t('zz.scheme.game.pain.title')}}</div>
          <p class="hanye-intro">{{$t('zz.scheme.game.pain.des')}}</p>
          <h4 class="hanye-title">
            <em class="blue">{{$t('zz.scheme.game.pain.subtitle')}}</em>
          </h4>
          <div class="marginTitle">
            <zz-card titleSize="small">
              <span slot="title">{{$t('zz.scheme.game.pain.1.title')}}</span>
              <ul class="list-has-poi" slot="content">
                <li>{{$t('zz.scheme.game.pain.1.1.des')}}</li>
                <li>{{$t('zz.scheme.game.pain.1.2.des')}}</li>
                <li>{{$t('zz.scheme.game.pain.1.3.des')}}</li>
                <li>{{$t('zz.scheme.game.pain.1.4.des')}}</li>
              </ul>
              <img
                src="@/assets/img/game/game1-1.png"
                alt=""
                slot="img"
                width="300"
              />
            </zz-card>
          </div>
          <div class="marginTitle">
            <zz-card titleSize="small">
              <span slot="title">{{$t('zz.scheme.game.pain.2.title')}}</span>
              <ul class="list-has-poi" slot="content">
                <li>{{$t('zz.scheme.game.pain.2.1.des')}}</li>
                <li>{{$t('zz.scheme.game.pain.2.2.des')}}</li>
                <li>{{$t('zz.scheme.game.pain.2.3.des')}}</li>
              </ul>
              <img
                src="@/assets/img/game/game1-2.png"
                alt=""
                slot="img"
                width="300"
              />
            </zz-card>
          </div>
          <div class="marginTitle">
            <zz-card titleSize="small">
              <span slot="title">{{$t('zz.scheme.game.pain.3.title')}}</span>
              <ul class="list-has-poi" slot="content">
                <li>{{$t('zz.scheme.game.pain.3.1.des')}}</li>
                <li>{{$t('zz.scheme.game.pain.3.2.des')}}</li>
                <li>{{$t('zz.scheme.game.pain.3.3.des')}}</li>
              </ul>
              <img
                src="@/assets/img/game/game1-3.png"
                alt=""
                slot="img"
                width="300"
              />
            </zz-card>
          </div>
        </div>
        <div>
          <div class="details-title">{{$t('zz.solution')}}</div>
          <div>
            <p class="hanye-intro marginTitle">{{$t('zz.scheme.game.scheme.intro')}}</p>
            <div class="flex-4 scheme-wrap">
              <div class="flex-4-item scheme-item">
                <div class="scheme-item-body item-title">{{$t('zz.scheme.game.scheme.1.title')}}</div>
                <div class="scheme-item-body">
                  <h5>{{$t('zz.scheme.game.scheme.1.1.des')}}</h5>
                </div>
                <div class="scheme-item-body">
                  <h6>{{$t('zz.scheme.game.scheme.1.2.h')}}</h6>
                  <p>{{$t('zz.scheme.game.scheme.1.2.p')}}</p>
                </div>
                <div class="scheme-item-body">
                  <h6>{{$t('zz.scheme.game.scheme.1.3.h')}}</h6>
                  <p>{{$t('zz.scheme.game.scheme.1.3.p')}}</p>
                </div>
                <div class="scheme-item-body">
                  <h6>{{$t('zz.scheme.game.scheme.1.4.h')}}</h6>
                  <p>{{$t('zz.scheme.game.scheme.1.4.p')}}</p>
                </div>
                <div class="scheme-item-body">
                  <h6>{{$t('zz.scheme.game.scheme.1.5.h')}}</h6>
                  <p>{{$t('zz.scheme.game.scheme.1.5.p')}}</p>
                </div>
              </div>
              <div class="flex-4-item scheme-item">
                <div class="scheme-item-body item-title">{{$t('zz.scheme.game.scheme.2.title')}}</div>
                <div class="scheme-item-body">
                  <h5>{{$t('zz.scheme.game.scheme.2.1.des')}}</h5>
                </div>
                <div class="scheme-item-body" style="height: 111px">
                  <h6>{{$t('zz.scheme.game.scheme.2.2.h')}}</h6>
                  <p>{{$t('zz.scheme.game.scheme.2.2.p')}}</p>
                </div>
                <div class="scheme-item-body" style="height: 111px">
                  <h6>{{$t('zz.scheme.game.scheme.2.3.h')}}</h6>
                  <p>{{$t('zz.scheme.game.scheme.2.3.p')}}</p>
                </div>
                <div class="scheme-item-body" style="height: 112px">
                  <h6>{{$t('zz.scheme.game.scheme.2.4.h')}}</h6>
                  <p>{{$t('zz.scheme.game.scheme.2.4.p')}}</p>
                </div>
              </div>
              <div class="flex-4-item scheme-item">
                <div class="scheme-item-body item-title">{{$t('zz.scheme.game.scheme.3.title')}}</div>
                <div class="scheme-item-body">
                  <h5>{{$t('zz.scheme.game.scheme.3.1.des')}}</h5>
                </div>
                <div class="scheme-item-body" style="height: 167px">
                  <h6>{{$t('zz.scheme.game.scheme.3.2.h')}}</h6>
                  <p>{{$t('zz.scheme.game.scheme.3.2.p')}}</p>
                </div>
                <div class="scheme-item-body" style="height: 167px">
                  <h6>{{$t('zz.scheme.game.scheme.3.3.h')}}</h6>
                  <p>{{$t('zz.scheme.game.scheme.3.3.p')}}</p>
                </div>
              </div>
              <div class="flex-4-item scheme-item">
                <div class="scheme-item-body item-title">{{$t('zz.scheme.game.scheme.4.title')}}</div>
                <div class="scheme-item-body">
                  <h5>{{$t('zz.scheme.game.scheme.4.1.des')}}</h5>
                </div>
                <div class="scheme-item-body" style="height: 167px">
                  <h6>{{$t('zz.scheme.game.scheme.4.2.h')}}</h6>
                  <p>{{$t('zz.scheme.game.scheme.4.2.p')}}</p>
                </div>
                <div class="scheme-item-body" style="height: 167px">
                  <h6>{{$t('zz.scheme.game.scheme.4.3.h')}}</h6>
                  <p>{{$t('zz.scheme.game.scheme.4.3.p')}}</p>
                </div>
              </div>
            </div>
            <div class="scheme-wrap-bottom">{{$t('zz.scheme.game.scheme.show')}}</div>
            <div class="cdnFuwu-wrap marginTop">
              <h5 class="marginTitle">{{$t('zz.scheme.game.scheme.showtitle')}}</h5>
              <div class="flex flexAC marginTitle">
                <div class="title-item">
                  <h6>Question</h6>
                  <div>客户问题</div>
                </div>
                <div class="title-item-mid">&</div>
                <div class="title-item">
                  <h6>Answer</h6>
                  <div>解决方案</div>
                </div>
              </div>
              <div class="cdnFuwu-body">
                <div>
                  <div class="flex cdnFuwu-body-item marginSmall">
                    <div class="item-left">
                      <div class="cir">{{$t('zz.scheme.game.scheme.showtrait.1')}}</div>
                      <div><em>Q: {{$t('zz.scheme.game.scheme.showtrait.1.Q')}}</em></div>
                    </div>
                    <div class="item-right">
                      <div><em>A: </em></div>
                      <p>{{$t('zz.scheme.game.scheme.showtrait.1.A')}}</p>
                    </div>
                  </div>
                  <div class="flex cdnFuwu-body-item marginSmall">
                    <div class="item-left">
                      <div class="cir">{{$t('zz.scheme.game.scheme.showtrait.2')}}</div>
                      <div><em>Q: {{$t('zz.scheme.game.scheme.showtrait.2.Q')}}</em></div>
                    </div>
                    <div class="item-right">
                      <div class="flex flexAC">
                        <div class="icon-wrap">
                          <i class="iconfont icon-user-approval blue"></i>
                          <i class="iconfont icon-plus green"></i>
                          <i class="iconfont icon-yumin blue"></i>
                        </div>
                        <div>
                          <sim-card :title="$t('zz.scheme.game.scheme.showtrait.2.A')">
                            <ul class="list-has-poi" slot="content">
                              <li>{{$t('zz.scheme.game.scheme.showtrait.2.A.1')}}</li>
                              <li>{{$t('zz.scheme.game.scheme.showtrait.2.A.2')}}</li>
                            </ul>
                          </sim-card>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="flex cdnFuwu-body-item marginSmall">
                    <div class="item-left">
                      <div class="cir">{{$t('zz.scheme.game.scheme.showtrait.3')}}</div>
                      <div><em>Q: {{$t('zz.scheme.game.scheme.showtrait.3.Q')}}</em></div>
                    </div>
                    <div class="item-right">
                      <div class="flex flexAC">
                        <div class="icon-wrap">
                          <i class="iconfont icon-connection blue"></i>
                          <i class="iconfont icon-plus green"></i>
                          <i class="iconfont icon-saomiao blue"></i>
                        </div>
                        <div>
                          <sim-card :title="$t('zz.scheme.game.scheme.showtrait.3.A')">
                            <ul class="list-has-poi" slot="content">
                              <li>{{$t('zz.scheme.game.scheme.showtrait.3.A.1')}}</li>
                              <li>{{$t('zz.scheme.game.scheme.showtrait.3.A.2')}}</li>
                            </ul>
                          </sim-card>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="flex cdnFuwu-body-item marginSmall">
                    <div class="item-left">
                      <div class="cir">{{$t('zz.scheme.game.scheme.showtrait.4')}}</div>
                      <div>
                        <em
                          >Q: {{$t('zz.scheme.game.scheme.showtrait.4.A')}}</em
                        >
                      </div>
                    </div>
                    <div class="item-right">
                      <div class="flex flexAC">
                        <div class="icon-wrap">
                          <i class="iconfont icon-safe blue"></i>
                          <i class="iconfont icon-plus green"></i>
                          <i class="iconfont icon-zhineng blue"></i>
                        </div>
                        <div>
                          <sim-card :title="$t('zz.scheme.game.scheme.showtrait.4.A')">
                            <ul class="list-has-poi" slot="content">
                              <li>{{$t('zz.scheme.game.scheme.showtrait.4.A.1')}}</li>
                              <li>{{$t('zz.scheme.game.scheme.showtrait.4.A.2')}}</li>
                            </ul>
                          </sim-card>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="details-title">{{$t('zz.scheme.game.scheme_optimization')}}</div>
          <div class="flex-2">
            <div class="flex-2-item">
              <sim-card :title="$t('zz.scheme.game.scheme.1.title')" size="20">
                <ul slot="content" class="list-has-poi">
                  <li>{{$t('zz.scheme.game.optimum.1.1')}}</li>
                  <li>{{$t('zz.scheme.game.optimum.1.2')}}</li>
                  <li>{{$t('zz.scheme.game.optimum.1.3')}}</li>
                  <li>{{$t('zz.scheme.game.optimum.1.4')}}</li>
                </ul>
              </sim-card>
            </div>
            <div class="flex-2-item">
              <sim-card :title="$t('zz.scheme.game.scheme.2.title')" size="20">
                <ul slot="content" class="list-has-poi">
                  <li>{{$t('zz.scheme.game.optimum.2.1')}}</li>
                  <li>{{$t('zz.scheme.game.optimum.2.2')}}</li>
                  <li>{{$t('zz.scheme.game.optimum.2.3')}}</li>
                  <li>{{$t('zz.scheme.game.optimum.2.4')}}</li>
                  <li>{{$t('zz.scheme.game.optimum.2.5')}}</li>
                </ul>
              </sim-card>
            </div>
            <div class="flex-2-item">
              <sim-card :title="$t('zz.scheme.game.scheme.3.title')" size="20">
                <ul slot="content" class="list-has-poi">
                  <li>{{$t('zz.scheme.game.optimum.3.1')}}</li>
                  <li>{{$t('zz.scheme.game.optimum.3.2')}}</li>
                  <li>{{$t('zz.scheme.game.optimum.3.3')}}</li>
                </ul>
              </sim-card>
            </div>
            <div class="flex-2-item">
              <sim-card :title="$t('zz.scheme.game.scheme.4.title')" size="20">
                <ul slot="content" class="list-has-poi">
                  <li>{{$t('zz.scheme.game.optimum.4.1')}}</li>
                  <li>{{$t('zz.scheme.game.optimum.4.2')}}</li>
                  <li>{{$t('zz.scheme.game.optimum.4.3')}}</li>
                  <li>{{$t('zz.scheme.game.optimum.4.4')}}</li>
                  <li>{{$t('zz.scheme.game.optimum.4.5')}}</li>
                </ul>
              </sim-card>
            </div>
          </div>
        </div>
      </div>
    </zz-sub-nav>
  </div>
</template>

<script>
import SubNav from "@/components/SubNav/index.vue";
import ZzCard from "@/components/ZzCard";
import SimCard from "@/components/SimCard";

export default {
  data() {
    return {
      index: 1,
      subIndex: 1,
      
    };
  },

  components: {
    "zz-sub-nav": SubNav,
    ZzCard,
    SimCard,
  },
  props: {},
  mounted() {},
  computed: {
    activeItem: function () {
      let activeItem = this.list.find((v) => v.index == this.index);
      console.log(this.list[this.index]);
      this.subIndex = activeItem.child ? activeItem.child[0].index : 1;
      return activeItem;
    },
    list: function(){ return [
        { name: this.$t('zz.scheme.game.pain.title'), index: 1 },
        { name: this.$t('zz.solution'), index: 2 },
        { name: this.$t('zz.scheme.game.scheme_optimization'), index: 3 },
      ]
    },
  },
  watch: {},
  methods: {
    navClick(a_item) {
      console.log(a_item);
      this.subIndex = a_item.index;
    },
  },
  destroyed() {},
};
</script>
<style lang='scss' scoped>
@import "@/style/variables.scss";

.sub-nav-content {
  padding: 12px 48px;
  flex: 1;
  width: 100%;
  .pro-title {
    color: $color;
    font-size: 20px;
    padding: 20px 45px;
    border-bottom: 1px solid $border;
  }
  .pro-intro-wrap {
    padding: 30px 48px;
  }
  img {
    max-width: 100%;
  }
}
.son-pro-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
  & > div {
    width: 238px;
  }
}

.app-wrap {
  & > div {
    width: 336px;
    padding: 30px;
  }
}
.hanye-intro {
  color: #000;
  font-size: 14px;
  line-height: 250%;
}
.hanye-title {
  color: $primary;
  font-size: 22px;
  line-height: 250%;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  margin-top: 35px;
}

.scheme-wrap {
  color: #fff;
  .scheme-item {
    margin-bottom: 0.2rem;
    border-radius: 13px 13px 0 0;
    .item-title {
      font-size: 18px;
      line-height: 150%;
      text-align: center;
      font-weight: bold;
      height: 50px;
      // background-color: #2a82e4;
    }
    .scheme-item-body {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      // background-color: #67a7ee;
      text-align: center;
      border-bottom: 1px solid #fff;
      h5 {
        font-size: 14px;
        line-height: 150%;
        margin: 0;
        padding: 12px 0;
      }
      h6 {
        font-size: 12px;
        line-height: 150%;
        margin: 0;
        padding: 6px 0;
      }
      p {
        margin: 0;
        font-size: 12px;
        line-height: 150%;
        transform: scale(0.833);
        color: #fff;
        margin-bottom: 12px;
      }
    }
    &:nth-child(1) {
      background-color: #67a7ee;
    }
    &:nth-child(2),
    &:nth-child(4) {
      background-color: #59c8c0;
      // .item-title {
      //   background-color: #a00a0d;
      // }
      // .scheme-item-body {
      //   background-color: #59c8c0;
      // }
    }
    &:nth-child(3) {
      background-color: #43cf7c;
      // .item-title {

      // }
      // .scheme-item-body {
      //   background-color: #8ddbad;
      // }
    }
  }
}
.scheme-wrap-bottom {
  background-color: #2a82e4;
  font-size: 19px;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  height: 50px;
  margin-top: 10px;
  color: #fff;
}
.cdnFuwu-wrap {
  margin-top: 50px;
  h5 {
    text-align: center;
    font-size: 24px;
    line-height: 150%;
    font-weight: bold;
  }
  .flexAC {
    justify-content: center;
  }
  .title-item {
    h6 {
      color: $primary;
      font-size: 30px;
      line-height: 150%;
      margin: 0;
    }
    div {
      font-size: 18px;
      line-height: 150%;
      text-align: right;
      font-weight: bold;
    }
    &:nth-child(3) {
      div {
        text-align: left;
      }
    }
  }
  .title-item-mid {
    width: 88px;
    height: 80px;

    color: #fff;
    background-color: $primary;
    border-radius: 20px;
    font-size: 40px;
    line-height: 80px;
    text-align: center;
    margin: 0 15px;
  }
}

.cir {
  width: 78px;
  height: 78px;
  color: #fff;
  background-color: $primary;
  border-radius: 40px;
  font-size: 20px;
  line-height: 78px;
  text-align: center;
}
.cdnFuwu-body {
  .cdnFuwu-body-item {
    .item-left {
      flex: 2;
      margin-right: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .cir {
        margin-bottom: 20px;
      }
      em {
        font-size: 16px;
      }
    }
    .item-right {
      flex: 3;
      & > p {
        color: $subTitleColor;
        font-size: 16px;
        line-height: 200%;
      }
      .icon-wrap {
        i {
          font-size: 40px;
        }
      }
    }
    .item-right,
    .item-left {
      background-color: #ccc;
      padding: 16px 24px;
      border-radius: 20px;
    }
  }
}

@media screen and (max-width: 768px) {
  .hanye-title {
    color: $primary;
    font-size: 0.4rem;
    line-height: 250%;
    margin-top: 35px;
  }
  .scheme-wrap {
    .scheme-item {
      margin-right: 2%;
      width: 49%;
      &:nth-child(2n){
         margin-right: 0;
      }
      .item-title {
        font-size: 0.4rem;
        line-height: 150%;
      }
      .scheme-item-body {
        h5 {
          font-size: 0.22rem;
        }
        p {
          font-size: 0.2rem;
          transform: scale(0.883);
        }
      }
    }
  }
  .cdnFuwu-wrap {
    .flexAC {
      justify-content: center;
    }
    .title-item {
      h6 {
        font-size: 0.65rem;
      }
      div {
        font-size: 0.4rem;
      }
    }
  }

  .cdnFuwu-body {
    .cdnFuwu-body-item {
      flex-wrap: wrap;
      margin: 0 0 .45rem !important;
      .item-left {
        width: 100%;
        flex: auto;
        margin-right: 0;
        margin-bottom: .2rem;
        .cir {
          margin-bottom: 20px;
        }
        em {
          font-size: 16px;
        }
      }
      .item-right {
        width: 100%;
        flex: auto;
        & > p {
          color: $subTitleColor;
          font-size: 16px;
          line-height: 200%;
        }
        .icon-wrap {
          i {
            font-size: 40px;
          }
        }
      }
      .item-right,
      .item-left {
        padding: .45rem .65rem;
        border-radius: .45rem;
      }
    }
  }
}
</style>